import React from 'react'
// ===================================================================== Temp
import SubmitForm from '#cpt/temp/SubmitForm'
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $fn, $Lazy, globalConfig } = window
const { COVIDUrl } = globalConfig
// ===================================================================== $Lazy
const Page 			= $Lazy.load(()=>import('#tp/page/page-container-scroll'))
const $cache 		= $Lazy.file(()=>import('#private/cache-api'))
const CodeList 		= $Lazy.state(()=>import('./cpt/code-list'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		// 搜索表单列表
		formData: [
			{ label: '医院条码',			name: 'hospNo',			full:true,
				onEnter: value => {
					const { formData } = this.state
					const arr = formData[1].data.filter(v => v.hospNo === value )
					const hosp_uuid = $fn.hasArray(arr) ? arr[0].uuid : '无'
					this.formRef.setValue({ hospId:hosp_uuid })
				},
				onValue: ({value}) => {
					const { formData } = this.state
					const arr = formData[1].data.filter(v => v.hospNo === value )
					const hosp_uuid = $fn.hasArray(arr) ? arr[0].uuid : '无'
					this.formRef.setValue({ hospId:hosp_uuid })
				}
			},
			{ label: '医院名称',			name: 'hospId',			full:true,				type:'select',		required:true,	idStr:'uuid',	nameStr:'hospName',
				onValue: ({rows}) => {
					if(rows){
						this.formRef.setValue({ hospNo: rows.hospNo ?? '无'})
					}
				}
			},
			{ label: '是否批量',			name: 'is_batch',		half:true,			type: 'checkbox',	
				onValue:({value,formData})=>{
					const { is_norson } = this.formRef.getValue()
					if (value) {
						if(is_norson){
							$fn.getRow(formData, 'end_code').disabled = false
						}
					} else {
						$fn.getRow(formData, 'end_code').disabled = true
						this.formRef.setValue({end_code:''})
					}
					this.setState({formData})
				},
			},
			{ label: '是否审核',				name: 'is_audit', 		half:true,			type: 'checkbox', value:1 },
			{ label: '打印实验号',			name: 'is_print', 		half:true,			type: 'checkbox', value:0 },
			{ label: '是否诺森条码',			name: 'is_norson', 		half:true,			type: 'checkbox', value:1,
				onValue:({value,formData})=>{
					const { is_batch } = this.formRef.getValue()
					if (value) {
						if(is_batch){
							$fn.getRow(formData, 'end_code').disabled = false
						}
					} else {
						$fn.getRow(formData, 'end_code').disabled = true
						this.formRef.setValue({end_code:''})
					}
					this.setState({formData})
				},
			},
			{ label: '开始条码号',			name: 'start_code',  		full:true,	itemClassName: 'start_code',
				onValue: ({value, formData}) => {
					// 输入 12位 启用 生成按钮
					if (value.length >= 8) {
						$fn.getRow(formData, 'end_code').btn.disabled = false
					} else {
						$fn.getRow(formData, 'end_code').btn.disabled = true
					}
					this.setState({formData})
				},
				onEnter: (value)=> {
					const { is_batch } = this.formRef.getValue()
					if(is_batch){
						document.querySelector('.end_code .ant-input.ant-input-borderless').focus()
					}else{
						this.getNum()
					}
				}
			},
			{ label: '结束条码号',		name: 'end_code',	 		disabled: true,		full:true,	itemClassName: 'end_code',
				btn: { label: '上架', 	disabled: true,	onClick: value=> this.getNum() },
				onEnter: (value) => this.getNum()
			},
			{ label: '备注',			name: 'remark',  	full:true, 		type: 'textarea' },
		],
	}
	componentDidMount(){
		this.getSelect()
		$fn.fresh.backRefresh()
	}
	
	// 获取下拉数据
	getSelect = () => {
		const { formData } = this.state
		$cache.then( async f => {
			// 医院名称
			this.hospData = await f.getCache({ api:COVIDUrl+'Hospital/query',param:{page:1,page_num:10000,status:1} })
			$fn.setRow( formData, 'hospId', this.hospData )
			
			this.setState({ formData })
		})
	}
	
	// 操作按钮
	controls = () => {
		return [
			Controls.back.call(this,{refresh:true, code: 'F1'} ),	// 返回
		]
	}
	
	getNum = () => {
		let { start_code, end_code, is_norson, is_batch} = this.formRef.getValue()
		if(is_batch && is_norson){
			this.formRef.setValue({start_code:null, end_code:null})
			if(start_code&&end_code&&start_code.length>=8&&end_code.length>=8&&start_code.length<=32&&end_code.length<=32&&(+end_code>=+start_code)){
				const nullBoard = this.codeListRef.state.tableNum.filter(v=>!$fn.hasObject(v))
				if((+end_code) - (+start_code) +1 > nullBoard.length){
					return $fn.msg.warning(`该板子最多还可上架${nullBoard.length}个条码`)
				}else{
					let arr = []
					for(var i = parseInt(start_code); i <= parseInt(end_code); i++){
						arr.push(i)
					}
					this.codeListRef.setTable({specCode:arr})
				}
			}else{
				return $fn.msg.warning('开始条码或结束条码输入不正确')
			}
		}else{
			this.formRef.setValue({start_code:null})
			if(start_code&&start_code.length>=8&&start_code.length<=32){
				this.codeListRef.setTable({specCode:[parseInt(start_code)]})
			}else{
				return $fn.msg.warning('开始条码不正确')
			}
		}
	}
	
	getValue = () => {
		return this.formRef.getValue()
	}
	
	codeFocus = () => {
		document.querySelector('.start_code .ant-input.ant-input-borderless').focus()
	}
	
	render() {
		return (
			<>
				<Page title='录入样本信息' className='' controls={this.controls()} style={{minHeight: '100%'}} >
					<section className='ex fx pt10 bcf' onClick={()=>this.codeListRef.setState({selectIndex:''})} >
						{/* 左侧表单 */}
						<div className='fv pr10' style={{width:'25%',minWidth: 330}}>
							<div>{ SubmitForm.call(this,{ labelWidth:'s7'} )}</div>
						</div>
						<div className='ex fv pr10 oh'>
							<CodeList thisRef={this} onRef={ref=>this.codeListRef=ref}	getValue={this.getValue} codeFocus={this.codeFocus} />
						</div>
					</section>
				</Page>
			</>
		)
	}
}

export default Index